<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>键盘</title>
    <style>
        #outer{
            border: 1px solid black;
            width: 600px;
            height: 400px;
        }
        #keyboard{
            border: 1px solid black;
            width: 538px;
            height: 200px;
            margin:50px 30px 20px 30px;
        }
        #touch{
            border:2px solid black;
            width:150px;
            height: 100px;
            margin-left: 150px;
        }
        #letterkey{
            border: 1px solid black;
            width:364px;
            height:190px;
            float: left;
            margin-left: 5px;
            margin-top: 5px;
        }

        
        #numberkey{
            border: 1px solid black;
            width:150px;
            height:190px;
            float: right;
            margin-right: 5px;
            margin-top: 5px;
        }









    </style>
</head>

<body>
    <div id="outer">
        <div id="keyboard">
            <div id="letterkey">
            </div>
            <div id="numberkey">
                <div id="firstline">
                    <div id="PgUp">PgUp</div>
                    <div id="PgDn">PgDn</div>
                    <div id="Home">Home</div>
                    <div id="End">End</div>
                </div>
                <div id="secondline">
                    <div id="NumLock">Num<br>Lock</div>
                    <div id="chu">/</div>
                    <div id="cheng">*</div>
                    <div id="jian">-</div>
                </div>
                <div id="thirdline">
                    <div id="ffssen">
                        <div id="ffs">
                            <div id="seven">7</div>
                            <div id="eight">8</div>
                            <div id="nine">9</div>
                        </div>
                        <div id="sen">
                            <div id="four">4</div>
                            <div id="five">5</div>
                            <div id="six">6</div>
                        </div>
                    </div>
                    <div id="jia">+</div>
                </div>
                <div id="fourthline">
                    <div id="ottzd">
                        <div id="ott">
                            <div id="one">1</div>
                            <div id="two">2</div>
                            <div id="three">3</div>
                        </div>
                        <div id="zd">
                            <div id="zreo">0</div>
                            <div id="dian">.</div>
                        </div>
                    </div>
                    <div id="Enter">Enter</div>
                </div>
            </div>
        </div>
        <div id="touch">

        </div>
    </div>
</body>

</html>